<template>
  <div class="article-show">
    <h1>{{ article.articleTitle }}</h1>
    <span class="article-meta">
      <strong>{{ article.createTime }}</strong> {{ article.name }}
    </span>
    
    <!-- 文章内容 -->
    <div v-html="article.content" class="article-content"></div>

    <div class="talks">
      <div class="talkitem" v-for="(item,index) in article.commentList">
        <div class="talk-top">
          <!-- 头像 -->
          <div class="pic">
            <img :src="item.avatar" alt="">
          </div>
          <div class="nickname">
            <span>{{ item.name }}</span>
          </div>
          <div class="time">
            <span>{{ item.commentTime }}</span>
            <span style="color: rgb(16, 91, 212);">赞: {{ item.commentLikes }}</span>
          </div>
        </div>

        <div class="talk-content">
          <p>{{ item.content }}</p>
        </div>

      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api/api.js';

// 接收路由传递的参数 id
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})

// 定义数据(文章内容)
const article = ref({
    aid: 0,
    articleTitle: "标题",
    views: 0,
    alikes: 0,
    content: "",
    name: "作者用户名",
    createTime: "2022-01-01 12:00:00",
    like: true,
    commentList: [
        {
            uid: 0,
            avatar: "",
            name: "用户名",
            cid: 0,
            content: "评论内容",
            like: true,
            commentLikes: 0,
            commentTime: "2022-01-01 12:00:00",
        }
    ]
})

const getArticleById = async (id) => {
  try {
    const res= await api.getArticleByIdApi({aid: id});
    article.value = res.data;
  } catch (error) {
    console.error("获取文章内容失败", error);
  }
}


// 根据路由传递的id 获取文章
onMounted(async () => {
  try {
      const articleId = parseInt(props.id)  // 获取路由参数 id

      await getArticleById(articleId);// 获取文章内容


    } catch (err) {
        console.error("加载资源时出错:", err);
    }
})

// 跳转到 MyArticles 页面
// const goToMyArticles = () => {
//   window.location.href = '/login/my-articles' // 路由跳转
// }



</script>

<style  lang = "less">
.article-show {
  width: 65%;
  margin: 0 auto;
  background-color: #f9f9f9; /* 示例背景色 */
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px 0px 0px 0px;

}

h1 {
  font-size: 30px;
  // text-align: center; /* 标题居中 */
  padding: 7px 33px 11px 22px;
}

/* 日期和根目录部分 */
.article-meta {
  font-size: 14px;
  color: #666;
  display: block; /* 强制为块级元素，以便控制间距 */
  margin-left: 22px; /* 顶部间距 */
  // margin-top: 10px; /* 顶部间距 */
  margin-bottom: 20px; /* 与内容之间的间距 */
}

.article-meta strong {
  margin-right: 12px; /* 日期和根目录之间的间距 */
}

.article-content{
  font-size: 18px; /* 设置p标签的字体大小为18px */
  padding: 10px 18px;
  text-indent: 2em; /* 首行缩进2个字符 */
  overflow-wrap: break-word;
}
.article-content img{
  max-width: 100%;
}
.talks{
  width: 100%;
  // background-color: antiquewhite;
  padding: 0 18px;
  .talkitem{
    background-color: rgb(218, 218, 218);
    margin-bottom: 5px;
    border-radius: 10px;
    .talk-top{
      display: flex;
      height: 40px;
      line-height: 40px;
      margin: 0;
      padding:0;
      justify-content: flex-start;
      align-items: center;
      .pic{
        width: 40px;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          
        }
      }
      .nickname{
        font-size: 16px;
        color: #070733;
      }
      .time{
        font-size: 14px;
        color: #565656;
        margin-left: 10px;
      }
    }
    .talk-content{
      padding: 5px 40px;
      width: 60%;
    }

  }

}
</style>
